<template>
  <div>
    <!-- 搜索区 -->
    <view class="search_wrap">
      <input type="text" placeholder="请输入你要搜索的商品" @input="handleInput" :value="inputValue"></input>
      <button :hidden="!isFocus" @click="cancelBtn">取消</button>
    </view>
    <!-- 结果 -->
    <view class="search_content">
      <navigator class="search_item" v-for="(item,index) in resultGoods" :key="index" :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id">
     {{item.goods_name}}
      </navigator>
  </view>
</div>
</template>

<script>
import {request} from '@/utils/tools'

export default {
  data() {
    return {
       resultGoods: [],
       isFocus: false,
        inputValue: ''
    }
  },
  TimeId: -1,
  methods:{
    // 输入东西
    handleInput(e) {
      console.log(e)
      const { value } = e.target
      if (!value.trim()) {
        this.resultGoods= [], this.isFocus= false
        return
      }
      this.isFocus=true
      // 定时器
      clearTimeout(this.TimeId)
      this.TimeId = setTimeout(() => {
        this.qsearch(value)
      }, 1000);
    },
    cancelBtn() {
      this.resultGoods= [], 
      this.inputValue='' 
    },
    async qsearch(query) {
      const res = await request({ url: "goods/qsearch", data: { query } })
      console.log(res.data.message);
      this.resultGoods= res.data.message
    }
  }
}
</script>
<style lang='less' scoped>
page {
  padding: 20rpx;
  background-color: #eeeeee;
}

.search_wrap {
  width: 100%;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  >input {
    flex: 1;
    height: 100%;
    background-color: #ffffff;
    padding-left: 30rpx;
  }

  >button {
    width: 110rpx;
    height: 100%;
    font-size: 26rpx;
    padding: 0;
    margin-left: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.search_content {
  background-color: #ffffff;
  margin-top: 30rpx;

  .search_item {
    border: 1rpx solid #cccccc;
    font-size: 26rpx;
    padding: 15px 10px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

  }
}
</style>
 